ট্যাগ এবং কম্পোনেন্টের মধ্যে ডেটা এবং ফাংশন শেয়ার করা

Riot.js তে ট্যাগ এবং কম্পোনেন্ট এর মধ্যে ডেটা এবং ফাংশন শেয়ার করা একটি গুরুত্বপূর্ণ বিষয়, কারণ এটি আপনাকে কম্পোনেন্ট ভিত্তিক অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। Riot.js এর কম্পোনেন্ট ভিত্তিক স্থাপত্যে, আপনি সহজেই এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা এবং ফাংশন শেয়ার করতে পারেন। এখানে কিছু পদ্ধতি দেখানো হচ্ছে যার মাধ্যমে আপনি এটি করতে পারেন।

১. Parent to Child Communication (প্যারেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাঠানো)

Riot.js তে প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাস করার জন্য opts (options) ব্যবহার করা হয়। প্যারেন্ট কম্পোনেন্টে থাকা ডেটা opts মাধ্যমে চাইল্ড কম্পোনেন্টে পাস করা হয়।

উদাহরণ: Parent to Child Communication

Parent Component (ParentComponent.riot):

<parent-component>
  <child-component title={parentTitle}></child-component>

  <script>
    export default {
      onMounted() {
        this.parentTitle = "Hello from Parent!";
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <h1>{opts.title}</h1> <!-- opts.title প্যারেন্ট থেকে এসেছে -->

  <script>
    export default {
      onMounted() {
        console.log("Child component mounted!");
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• parentTitle প্যারেন্ট কম্পোনেন্টের ডেটা, যা opts.title হিসাবে চাইল্ড কম্পোনেন্টে পাস করা হয়েছে।
• চাইল্ড কম্পোনেন্টে {opts.title} দিয়ে প্যারেন্ট থেকে আসা ডেটা প্রদর্শিত হচ্ছে।

২. Child to Parent Communication (চাইল্ড থেকে প্যারেন্ট কম্পোনেন্টে ডেটা পাঠানো)

চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ডেটা পাঠাতে Custom Events ব্যবহার করা হয়। চাইল্ড কম্পোনেন্ট একটি কাস্টম ইভেন্ট ট্রিগার করতে পারে এবং প্যারেন্ট কম্পোনেন্ট সেই ইভেন্ট শুনে ডেটা গ্রহণ করতে পারে।

উদাহরণ: Child to Parent Communication

Parent Component (ParentComponent.riot):

<parent-component>
  <child-component onsubmit={handleSubmit}></child-component>

  <script>
    export default {
      handleSubmit(e) {
        console.log("Received data from child:", e.detail);
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <button onclick={sendData}>Send Data to Parent</button>

  <script>
    export default {
      sendData() {
        this.emit('submit', { message: 'Hello from Child!' }); // Custom event
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• this.emit('submit', { message: 'Hello from Child!' }) চাইল্ড কম্পোনেন্টে একটি কাস্টম ইভেন্ট submit তৈরি করে, যা প্যারেন্ট কম্পোনেন্টে পৌঁছায়।
• প্যারেন্ট কম্পোনেন্টে onsubmit হ্যান্ডলার মাধ্যমে চাইল্ড কম্পোনেন্ট থেকে পাঠানো ডেটা গ্রহণ করা হয়।

৩. Shared State (একটি স্টেট শেয়ার করা)

আপনি যদি একাধিক কম্পোনেন্টের মধ্যে একই স্টেট শেয়ার করতে চান, তাহলে একটি Global State বা Shared State ব্যবহার করতে পারেন। Riot.js তে সাধারণভাবে, shared state ম্যানেজমেন্টের জন্য একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি ব্যবহার করা হয় (যেমন Redux বা Flux), তবে ছোট অ্যাপ্লিকেশনগুলির জন্য স্টেট শেয়ার করতে আপনি সাধারণ JavaScript অবজেক্ট বা Riot.observable ব্যবহার করতে পারেন।

উদাহরণ: Shared State Using Riot.observable

Global State (State.js):

import riot from 'riot';

export const state = riot.observable({
  title: 'Initial State'
});

Parent Component (ParentComponent.riot):

<parent-component>
  <h1>{state.title}</h1>
  <button onclick={changeTitle}>Change Title</button>

  <script>
    import { state } from './State';

    export default {
      onMounted() {
        state.on('change', () => {
          this.update();
        });
      },

      changeTitle() {
        state.title = 'Updated by Parent!';
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <h1>{state.title}</h1>

  <script>
    import { state } from './State';

    export default {
      onMounted() {
        state.on('change', () => {
          this.update();
        });
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• state একটি শেয়ারড স্টেট হিসেবে ব্যবহার করা হয়েছে এবং এটি riot.observable() এর মাধ্যমে তৈরি করা হয়েছে।
• প্যারেন্ট এবং চাইল্ড কম্পোনেন্ট উভয়ই একই state শেয়ার করছে, ফলে এক কম্পোনেন্টে স্টেট পরিবর্তিত হলে অন্য কম্পোনেন্টে সেটি আপডেট হবে।

৪. Shared Functions (একটি ফাংশন শেয়ার করা)

রাইট.জেএস-এ ফাংশন শেয়ার করতে আপনি সাধারণ JavaScript ফাংশন ব্যবহার করতে পারেন অথবা একাধিক কম্পোনেন্টের মধ্যে Common Functions শেয়ার করতে একটি Utility Module তৈরি করতে পারেন।

উদাহরণ: Shared Functions Using Utility Module

Utility.js (Shared Function):

export function updateTitle(newTitle) {
  console.log('Title updated:', newTitle);
  return newTitle;
}

Parent Component (ParentComponent.riot):

<parent-component>
  <button onclick={updateParentTitle}>Update Title</button>

  <script>
    import { updateTitle } from './Utility';

    export default {
      updateParentTitle() {
        const newTitle = updateTitle('Updated from Parent!');
        console.log(newTitle); // "Updated from Parent!"
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <button onclick={updateChildTitle}>Update Title from Child</button>

  <script>
    import { updateTitle } from './Utility';

    export default {
      updateChildTitle() {
        const newTitle = updateTitle('Updated from Child!');
        console.log(newTitle); // "Updated from Child!"
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• Utility.js ফাইলটিতে একটি সাধারণ JavaScript ফাংশন updateTitle() তৈরি করা হয়েছে যা প্যারেন্ট এবং চাইল্ড কম্পোনেন্টে শেয়ার করা হয়েছে।

Riot.js-এ ট্যাগ এবং কম্পোনেন্ট এর মধ্যে ডেটা এবং ফাংশন শেয়ার করা সম্ভব বিভিন্ন উপায় দিয়ে:

1. প্যারেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাঠানোর জন্য opts ব্যবহার করা।
2. চাইল্ড থেকে প্যারেন্ট কম্পোনেন্টে ডেটা পাঠানোর জন্য কাস্টম ইভেন্ট ব্যবহার করা।
3. Shared State বা Global State ব্যবহারের মাধ্যমে একাধিক কম্পোনেন্টের মধ্যে স্টেট শেয়ার করা।
4. Utility Module ব্যবহার করে ফাংশন শেয়ার করা।

এগুলি Riot.js এর কম্পোনেন্ট ভিত্তিক অ্যাপ্লিকেশনে ডেটা এবং ফাংশন শেয়ার করার প্রধান উপায়।